<template>
    <div class="container">
        <!-- <header>
            <div class="logo">
                <SlackOutlined style="font-size: 18px; color: #1890ff;" />
                <span class="brand">XPOS收银系统</span>
            </div>
            <div class="action">
                <MinusOutlined @click="handleMinimize" />
                <CloseOutlined @click="handleClose" />
            </div>
        </header> -->
        <div class="login-panel">
            <!-- <div class="banner"></div> -->
            <a-form autocomplete="off" :model="formState" layout="vertical">
                <a-form-item label="账号" name="username"
                    :rules="[{ required: true, message: 'Please input your username!' }]">
                    <a-input v-model:value="formState.username" size="large" />
                </a-form-item>
                <a-form-item label="密码" name="password"
                    :rules="[{ required: true, message: 'Please input your password!' }]">
                    <a-input-password v-model:value="formState.password" size="large" />
                </a-form-item>
                <a-form-item name="记住我">
                    <a-checkbox v-model:checked="formState.remember" size="large">记住我</a-checkbox>
                </a-form-item>
                <a-button type="primary" size="large" class="submit-btn" @click.prevent="onSubmit">登录</a-button>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();
const formState = reactive({
    username: '',
    password: '',
    remember: true,
});
// const handleClose = () => {
//     console.log("close")
//     window.ipcRenderer.send('window-closed');
// }
// const handleMinimize = () => {
//     window.ipcRenderer.send('window-min');
// }
const onSubmit = () => {
    localStorage.setItem("access_token", 1)
    // window.ipcRenderer.send('logined');
    router.push({ path: '/' })
};
</script>

<style lang="scss" scoped>
header {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-user-select: none;
    -webkit-app-region: drag;

    .action {
        ::v-deep(.anticon) {
            -webkit-app-region: none;
            cursor: pointer;
            margin-left: 6px;
            margin-right: 6px;

            &:hover {
                color: #1890ff;
            }
        }
    }
}

.logo {
    .brand {
        font-size: 14px;
        padding-left: 4px;
    }
}

.container {
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../assets/images/fabrizio-conti-z2BCD8Bgd9M-unsplash.jpg) no-repeat left top;
    background-size: cover;

    .login-panel {
        width: 400px;
        display: flex;
        padding: 30px;
        background-color: rgba($color: #fff, $alpha: .86);
        border-radius: 6px;

        .banner {
            flex: 1;
        }

        .ant-form {
            flex: 1;
        }

        .ant-input-lg,
        .ant-input-affix-wrapper-lg {
            border-radius: 4px;
        }

        .submit-btn {
            width: 100%;
            border-radius: 4px;
        }
    }
}
</style>